<template>
  <div class="content">
    <!-- header area  -->
    <mt-header fixed title="Vue Project to me" class="header">
      <a href="javascript:window.history.back();"
         v-show="currentPage !== 'home' "
         slot="left" class="back">&lt;返回</a>
    </mt-header>
    <!-- main area  -->
    <main>
      <transition>
        <router-view>

        </router-view>
      </transition>
    </main>
    <!-- footer area  -->
    <footer>
      <nav class="mui-bar mui-bar-tab">
        <router-link class="mui-tab-item1 mui-active" to="/home">
          <span class="mui-icon mui-icon-home"></span>
          <span class="mui-tab-label">首页</span>
        </router-link>
        <router-link class="mui-tab-item1" to="/member">
          <span class="mui-icon mui-icon-contact mui-icon-icon-contact-filled"></span>
          <span class="mui-tab-label">会员</span>
        </router-link>
        <router-link class="mui-tab-item1" to="/shopCart">
          <span class=" mui-icon mui-icon-extra mui-icon-extra-cart" id="shopCar">
            <span class="mui-badge mui-badge-danger" v-show="$store.getters.getCount > 0" >
              {{ $store.getters.getCount }}
            </span>
          </span>
          <span class="mui-tab-label" >购物车</span>
        </router-link>
        <router-link class="mui-tab-item1" to="/search">
          <span class="mui-icon mui-icon-search"></span>
          <span class="mui-tab-label">搜索</span>
        </router-link>
      </nav>
    </footer>
  </div>
</template>

<script>
  export default {
      data: function () {
        return {

        }
      },
      created() {
      },
      methods: {

      },
      computed: {
          // 获取当前页面
          currentPage() {
              return this.$route.fullPath.substr(1)
          }
      }
  }
</script>


<style scoped lang="less">
  // 设置 进来 和 出去的样式
  .v-enter{
    opacity: 0;
    transform: translateX(100%);

  }
  .v-leave-to{
    opacity: 0;
    transform: translateX(-100%);
    position: absolute;
  }

  // 设置 中间过渡样式
  .v-enter-active,
  .v-leave-active{
    transition: all 0.5s ease;
  }


  .content{
    overflow-x: hidden;
    box-sizing: border-box;
    padding: 40px 0 50px 0;
    header{
      font-size: 20px;
      z-index: 99;
      .back{
        font-size: 15px;
        line-height: 40px;
      }
    }
    main {
    }
    footer {
      .mui-bar-tab .mui-tab-item1.mui-active {
        color: #007aff;
      }

      .mui-bar-tab .mui-tab-item1 {
        display: table-cell;
        overflow: hidden;
        width: 1%;
        height: 50px;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #929292;
      }

      .mui-bar-tab .mui-tab-item1 .mui-icon {
        top: 3px;
        width: 24px;
        height: 24px;
        padding-top: 0;
        padding-bottom: 0;
      }

      .mui-bar-tab .mui-tab-item1.mui-active {
        color: #007aff;
      }

      .mui-bar-tab .mui-tab-item1 {
        display: table-cell;
        overflow: hidden;
        width: 1%;
        height: 50px;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #929292;
      }

      .mui-bar-tab .mui-tab-item1 .mui-icon ~ .mui-tab-label {
        font-size: 11px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
</style>
